<template>
	<view class="nas-uploadedList-content">
		<!-- <scroll-view scroll-y="true" class="nas-uploadedList-scroll" @scrolltolower="scrolltolower"> -->
		<view class="nas-uploadedList-top">已上传（{{ total }}）</view>
		<view class="nas-uploadedList-body-item" v-for="(item, index) in fileList" :key="index" :class="{ active: item.select }">
			<view class="nas-uploadedList-body-image"><image :src="getFileType(item.fileName)" mode=""></image></view>
			<view class="nas-uploadedList-body-left-right">
				<view>{{ item.fileName }}</view>
				<view>{{ item.fileFinishTimeStr }} {{ dealSize(item.fileSize) }}</view>
			</view>
			<view class="nas-uploadedList-body-right-circle" @click.stop="hasSelectFile(item)">
				<image v-if="!item.select" src="../../../../static/nas-static/nas-radio-none.svg" mode=""></image>
				<image v-if="item.select" src="../../../../static/nas-static/nas-radio-yes.svg" mode=""></image>
			</view>
		</view>
		<view class="nas-nomore">无更多数据～</view>
		<!-- </scroll-view> -->
		<!-- 更多操作 -->
		<view class="nas-uploadedList-bottom" v-if="showBottomMore">
			<view class="nas-uploadedList-bottom-item" @click="dealBottom">
				<image class="nas-uploadedList-bottom-img" src="/static/nas-static/nas-delete.svg"></image>
				<view>删除</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
export default {
	props: {
		type: {
			type: String,
			default: '',
		}
	},
	data() {
		return {
			content: '',
			fileList: [],
			hasSelectFileList: [], //选中的文件
			showBottomMore: false,
			currentPage: 1,
			total: 0
		};
	},
	mounted() {
		this.getInfos();
	},
	methods: {
		async getInfos() {
			const params = {
				method: 'POST',
				url: '/nas/file/forward/record/list',
				data: {
					currentPage: this.currentPage,
					pageSize: 20,
					fileForwardStatus: 2,
					clientType: 2
				}
			};
			console.log(params, 'params');
			const res = await request(params);
			this.total = res.data.totalNum;
			res.data.data.forEach(val => (val.select = false));
			// console.log(res, 'res');
			this.fileList = this.fileList.concat(res.data.data);
			// console.log(this.fileList, 'this.fileList');
		},
		// 判断是否存在选中的文件
		hasSelectFile(item) {
			item.select = !item.select;
			this.hasSelectFileList = this.fileList.filter(val => val.select);
			if (this.hasSelectFileList.length > 0) {
				this.showBottomMore = true;
				this.$emit('showTopMore', this.hasSelectFileList.length);
			} else {
				this.showBottomMore = false;
				this.$emit('showTopMore', this.hasSelectFileList.length);
			}
		},
		scrolltolower() {
			console.log('触发底部的操作');
			this.currentPage = this.currentPage + 1;
			this.getInfos();
		},
		// 删除操作
		async dealBottom() {
			const ids = this.hasSelectFileList.map(val => val.id);
			const params = {
				method: 'POST',
				url: '/nas/file/forward/record/delete',
				data: {
					ids: ids.join(',')
				}
			};
			console.log(params, 'params');
			const res = await request(params);
			this.showBottomMore = false;
			this.originInfos();
		},
		// 取消选择
		allCancel() {
			this.fileList.forEach(val => (val.select = false));
			this.showBottomMore = false;
		},
		// 全选
		allSelect() {
			this.fileList.forEach(val => (val.select = true));
		},
		originInfos() {
			this.fileList = [];
			this.currentPage = 1;
			this.allCancel();
			this.$emit('showTopMore', 0);
			this.getInfos();
		},
		// 判断文件的类型
		getFileType(filename) {
			let previewUrl = '';
			let arr = filename.split('.');
			let len = arr.length;
			let ext = arr[len - 1].toLocaleLowerCase();
			if (ext == 'mp3') {
				// 音频
				previewUrl = '/static/nas-static/nas-new-music.png';
			}
			if (ext == 'doc' || ext == 'docx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'ppt' || ext == 'pptx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'pdf') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'rar' || ext == 'zip' || ext == '7z' || ext == 'gz') {
				previewUrl = '/static/nas-static/nas-zip.svg';
			}
			if (ext == 'xls' || ext == 'xlsx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'txt') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'mp4' || ext == 'mov') {
				previewUrl = '/static/nas-static/nas-new-video.png';
			}
			if (ext == 'jpg' || ext == 'png' || ext == 'jpeg') {
				previewUrl = '/static/nas-static/nas-new-pic.png';
			}
			if (previewUrl) {
				return previewUrl;
			} else {
				return '/static/nas-static/nas-new-pic.png';
			}
		},
		//计算文件的大小
		dealSize: num => {
			if (!num) return '0B';
			let k = 1024; //设定基础容量大小
			let sizeStr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //容量单位
			let i = 0; //单位下标和次幂
			for (let l = 0; l < 8; l++) {
				//因为只有8个单位所以循环八次
				if (num / Math.pow(k, l) < 1) {
					//判断传入数值 除以 基础大小的次幂 是否小于1，这里小于1 就代表已经当前下标的单位已经不合适了所以跳出循环
					break; //小于1跳出循环
				}
				i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
			}
			//例： 900 / Math.pow(1024, 0)  1024的0 次幂 是1 所以只要输入的不小于1 这个最小单位就成立了；
			//   900 / Math.pow(1024, 1)  1024的1次幂 是1024  900/1024 < 1 所以跳出循环 下边的 i = l；就不会执行  所以 i = 0； sizeStr[0] = 'B';
			//   以此类推 直到循环结束 或 条件成立
			return (num / Math.pow(k, i)).toFixed(2) + sizeStr[i]; //循环结束 或 条件成立 返回字符
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-uploadedList-content {
	.nas-uploadedList-top {
		font-family: HarmonyOS_Sans_SC;
		font-size: 24rpx;
		margin-top: 60rpx;
		margin-left: 32rpx;
		color: #999999;
	}
	position: relative;
	// top: 120rpx;
	// bottom: 0;
	// right: 0;
	// left: 0;
	// overflow-y: scroll;
	.nas-nomore {
		height: 160rpx;
		display: flex;
		justify-content: center;
		font-size: 22rpx;
	}
	.nas-uploadedList-scroll {
		// position: absolute;
		// top: 0rpx;
		// bottom: 0;
		// right: 0;
		// left: 0;
		// overflow-y: scroll;
	}
}
.nas-uploadedList-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150rpx;
	background: #3069dc;
	border-radius: 16rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: space-around;
	.nas-uploadedList-bottom-item {
		width: 84rpx;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		font-weight: 500;
		.nas-uploadedList-bottom-img {
			width: 32rpx;
			height: 36rpx;
		}
	}
}
.nas-uploadedList-body-item {
	padding: 26rpx 32rpx 26rpx 32rpx;
	// height: 130rpx;
	display: flex;
	align-items: center;
	&.active {
		background-color: rgba(246, 236, 236, 0.3);
	}
	.nas-uploadedList-body-image {
		display: flex;
		align-items: center;
		image {
			width: 62rpx;
			height: 62rpx;
		}
	}
	.nas-uploadedList-body-left-right {
		margin-left: 16rpx;
		view {
			max-width: 480rpx;
			&:first-of-type {
				font-family: HarmonyOS_Sans_SC;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			&:last-of-type {
				font-family: HarmonyOS_Sans_SC;
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 0;
				font-weight: 400;
			}
		}
	}
	.nas-uploadedList-body-right-circle {
		margin-left: auto;
		width: 38rpx;
		height: 38rpx;
		image {
			width: 38rpx;
			height: 38rpx;
		}
	}
}
</style>
